<template >
	<view class="content" >
		<view class="shop">
			<view class="info">
				<view class="top1">
					<view class="left">
						<image :src="data.cover" mode=""></image>
					</view>
					<view class="right">
						<view class="right1">
							<view class="">{{ data.name }}</view>
							<image
								src="../../../static/zhu111.png"
								mode=""
								@click="getLocationBulletBox(data.id)"
							></image>
							<text class="text" @click="attn">
								{{ guanzhu }}
							</text>
						</view>
						<view class="right2">
							<text>已售{{ data.sold }}</text>
							<text>人均￥{{ data.price }}/人</text>
							<!-- <text>点评:{{ data.review }}</text> -->
						</view>
						<view class="right3">
							<text>{{ data.type }}</text>
							<text class="text">{{ data.site }}</text>
							<text>
								{{
									data.changdu == undefined
										? 0
										: data.changdu
								}}km
							</text>
						</view>
						<view class="right4">
							<navigator url="../activity/activity">
								<text>{{ data.free }}</text>
							</navigator>
							<!-- <text>5折</text> -->
							<!-- <navigator url="../details/details">买单</navigator> -->
							<!-- <text
								@click="confirmBuyOrdr(data.id)"
								
							>
								买单
							</text> -->
						</view>
						<view class="right5">
							<view class="view">
								<text>
									当前为{{ data.num }}/{{ data.full }}单:
								</text>
								<bolck
									v-for="(item2, index2) in data.full + 1"
									:key="index2"
								>
									<image
										src="../../../static/mmm2.png"
										mode=""
										v-if="index2 < data.num"
									></image>
									<image
										src="../../../static/caise2.png"
										mode=""
										v-else-if="
											index2 === data.full &&
												data.num < data.full
										"
									></image>
									<image
										src="../../../static/caise333.png"
										mode=""
										v-else-if="
											index2 === data.full &&
												data.num === data.full
										"
									></image>
									<image
										src="../../../static/mmm1.png"
										mode=""
										v-else
									></image>
								</bolck>
							</view>
							<view class="view1">
								<text @click="confirmBuyOrdr(data.id)">
									买单
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="button">
					<view class="name">餐厅环境</view>
					<view class="shuxian"></view>
					<view class="showPictures">
						<view v-for="(item, index) in data.atlas" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</view>
				</view>

				<view class="ctct">
					<view class="name">联系餐厅</view>
					<view class="shuxian"></view>
					<view class="guanzhu">
						<image :src="data.code" mode="" class="text"></image>
						<text class="text1">扫码关注</text>
					</view>
				</view>
			</view>
		</view>

		<view class="tankuang" v-if="isTouming">
			<view class="box">
				<image
					src="../../../static/guanbi.png"
					mode=""
					class="image"
					@click="isTouming = false"
				></image>
				<text class="text">{{ bulletInfo.name }}</text>
				<view class="info1">
					<image src="../../../static/ss2.png" mode=""></image>
					<text>{{ bulletInfo.phone }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss3.png" mode=""></image>
					<text>{{ bulletInfo.site }}</text>
				</view>
				<view class="info1">
					<image src="../../../static/ss1.png" mode=""></image>
					<text>
						{{
							bulletInfo.site_time == null
								? ''
								: bulletInfo.site_time
						}}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sid: 0,
			isTouming: false,
			data: [],
			uid: '',
			bulletInfo: {},
			guanzhu: ''
		};
	},

	methods: {
		//计算赌徒距离
		calculateDistance(lat1, lng1, lat2, lng2) {
			var radLat1 = (lat1 * Math.PI) / 180.0;
			var radLat2 = (lat2 * Math.PI) / 180.0;
			var a = radLat1 - radLat2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var s =
				2 *
				Math.asin(
					Math.sqrt(
						Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
								Math.cos(radLat2) *
								Math.pow(Math.sin(b / 2), 2)
					)
				);
			s = s * 6378.137;
			s = Math.round(s * 10000) / 10000;

			s = s.toFixed(2);
			return s;
		},
		// 确认买单
		// confirmBuyOrdr(id) {
		// 	uni.navigateTo({
		// 		url: "../details/details?id=" + id
		// 	});
		// },
		confirmBuyOrdr(id) {
			try {
				const uid = uni.getStorageSync('uid');
				if (!uid) {
					uni.switchTab({
						url: '../my'
					});
				} else {
					uni.navigateTo({
						url: '../details/details?sid=' + id
					});
				}
			} catch (e) {
				// error
			}
		},
		//获取门店介绍
		async getAStore() {
			const { data: res } = await this.$u.post(
				'api/shop/shop_introduce',
				{ sid: this.sid, uid: this.uid }
			);
			console.log('店铺详情  ', res);
			this.data = res;

			const userLocation = uni.getStorageSync('userLocation');

			var list = userLocation.split(',');
			var longitude1 = list[0];
			var latitude2 = list[1];
			console.log('longitude1 :>> ', longitude1);
			console.log('latitude2 :>> ', latitude2);
			var juli = this.calculateDistance(
				longitude1,
				latitude2,
				res.longitude,
				res.dimension
			);
			console.log('当前的距离>> ', juli);
			this.data.changdu = juli;
		},
		//关注或取消关注店铺
		async attn() {
			const res = await this.$u.post('api/shop/user_focusOn', {
				sid: this.sid,
				uid: this.uid
			});
			console.log('关注或取消关注店铺>>  ', res);
			if (res.msg === '店铺关注成功') {
				this.guanzhu = '已关注';
				//uni.$showMsg(res.msg);
				this.$forceUpdate();
			} else if (res.msg === '不能关注自己的店铺') {
				//uni.$showMsg(res.msg);
				this.guanzhu = '关注';
			} else {
				this.guanzhu = '关注';
			}
		},
		//获取位置弹框
		async getLocationBulletBox(sid) {
			this.isTouming = true;
			const { data: res } = await this.$u.post('api/shop/shop_site', {
				sid: sid
			});
			this.bulletInfo = res;
			console.log('this.bulletInfo >>  ', this.bulletInfo);
		},
		// 店铺人气增加
		async increasePopularity() {
			const { data: res } = await this.$u.post(
				'api/shop/shop_sentiment',
				{ sid: this.sid }
			);
		}
	},
	onLoad(e) {
		try {
			const uid = uni.getStorageSync('uid');

			if (uid) {
				this.uid = uid;
				console.log('门店介绍的uid :>> ', this.uid);
			}
		} catch (e) {
			// error
		}
		console.log('e :>> ', e);
		this.sid = e.id;
		this.getAStore();
		this.increasePopularity();
		this.attn();
	}
};
</script>

<style lang="scss" scoped>

.content {
	background-color: #f8f8f8;

	.shop {
		padding: 31rpx 31rpx 31rpx 31rpx;

		.name {
			height: 34rpx;
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #333333;

			margin-bottom: 20rpx;
		}

		.info {
			width: 690rpx;
			// height: 576rpx;
			height: 100vh;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.top1 {
				display: flex;

				.left {
					width: 201rpx;
					height: 241rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					width: 430rpx;

					.right1 {
						height: 30rpx;
						line-height: 30rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 19rpx;

						view {
							width: 200rpx;
							height: 30rpx;
							font-size: 30rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 500;
							color: #333333;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}

						image {
							width: 90rpx;
							height: 30rpx;
							// margin-right: 108rpx;
						}
						.text {
							display: inline-block;
							width: 100rpx;
							height: 30rpx;
							background: linear-gradient(
								90deg,
								#ff6494 0%,
								#ffa86a 100%
							);
							border-radius: 5rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: 400;
							color: #ffffff;
							text-align: center;
							line-height: 30rpx;
						}
					}

					.right2 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
					}

					.right3 {
						height: 23rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 19rpx;
						display: flex;
						justify-content: space-between;
						margin-bottom: 47rpx;
						.text {
							width: 240rpx;
							text-align: center;
							height: 35rpx;
							white-space: nowrap; /* 规定文本是否折行 */
							overflow: hidden; /* 规定超出内容宽度的元素隐藏 */
							text-overflow: ellipsis;
						}
					}

					.right4 {
						margin-bottom: 11rpx;
						display: flex;
						justify-content: space-between;
						text {
							display: inline-block;
							text-align: center;
							color: #fefefe;
						}

						text:nth-child(1) {
							width: 136rpx;
							height: 40rpx;
							line-height: 40rpx;

							background: linear-gradient(
								90deg,
								#ff6494 0%,
								#ffa86a 100%
							);
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						// text:nth-child(2) {
						// 	width: 80rpx;
						// 	height: 40rpx;
						// 	line-height: 40rpx;
						// 	background: linear-gradient(180deg, #ff6494 0%, #ffa86a 100%);
						// 	border-radius: 5rpx;
						// 	margin-right: 100rpx;
						// }

						text:nth-child(2) {
							width: 85rpx;
							height: 40rpx;
							line-height: 40rpx;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}

					.right5 {
						height: 34rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.view {
							height: 34rpx;
							display: flex;
							align-items: center;
							text {
								height: 34rpx;
								line-height: 34rpx;
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							image {
								width: 27rpx;
								height: 27rpx;
								margin: 0 7rpx;
							}
						}
						.view1 {
							width: 70rpx;
							height: 40rpx;
							line-height: 40rpx;

							text-align: center;
							background: #ff0000;
							border-radius: 20rpx;

							font-size: 24rpx;
							font-family: 'Microsoft YaHei', PingFang SC;
							font-weight: bold;
							color: #fefefe;
						}
					}
				}
			}

			.button {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(90deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.showPictures {
					display: flex;
					// justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;
					}
					view:nth-child(3n) {
						image {
							margin-right: 0;
						}
					}
				}
			}

			.ctct {
				.name {
					width: 118rpx;
					height: 28rpx;
					font-size: 29rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 28rpx;
				}

				.shuxian {
					width: 120rpx;
					height: 8rpx;
					background: linear-gradient(90deg, #ffa73d, #ffdd65);
					border-radius: 4rpx;
					margin-top: 10rpx;
				}

				.guanzhu {
					display: flex;
					flex-direction: column;
					align-items: center;

					.text {
						width: 200rpx;
						height: 200rpx;
						// background-color: #007aff;
						border-radius: 10rpx;
						margin-top: 100rpx;
					}

					.text1 {
						font-size: 30rpx;
						font-family: 'Microsoft YaHei', PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 35rpx;
					}
				}
			}
		}
	}
	.tankuang {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.box {
			position: relative;
			width: 560rpx;
			height: 400rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin-top: 362rpx;

			.text {
				display: block;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 500;
				color: #333333;

				border-bottom: 2rpx solid #c7c7c7;
			}

			.info1 {
				display: flex;
				align-items: center;
				margin-top: 35rpx;
				margin-left: 50rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 31rpx;
				}

				text {
					font-size: 30rpx;
					font-family: 'Microsoft YaHei', PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.image {
				position: absolute;
				right: -60rpx;
				top: -60rpx;
				width: 71rpx;
				height: 71rpx;
			}
		}
	}
}
</style>
